<template>
  <div class="sideBar">
    <div class="rzzx-con-lf" id="rzzx-con-lf">
      <ul class="rzzx-con-lf-guid">
        <a href="javascript:void(0)" @click="$router.push('/dashboard/index')">
          <li :class="{'rzzx-con-lf-li-se':/home/.test(curRoute)}">
            <img src="../assets/wdzy-img.png">
            <span>我的主页</span>
          </li>
        </a>
        <a href="javascript:void(0)" @click="$router.push('/siteCenter/index')">
          <li :class="{'rzzx-con-lf-li-se':curRoute === 'siteCenter'}">
            <img src="../assets/kfzx-img.png">
            <span>开放中心</span>
          </li>
        </a>
        <a href="javascript:void(0)" @click="$router.push('/authentication/index?key='+ authType)">
          <li :class="{'rzzx-con-lf-li-se':curRoute === 'authentication'}">
            <img src="../assets/rzzx-img.png">
            <span>认证中心</span>
          </li>
        </a>
        <a class="sideBar-a" target="_blank" href="javascript:void(0)" v-for="(item, index) in collectList" :key="item.addrId">
          <li @click="linkToSite(item)" style="position: relative">
            <img :src="'./static/img/sitebar'+(index+1)+'.png'">
            <span :title="item.siteName">{{item.siteName}}</span>
            <img @click.stop="removeSiteStar(item)" class="sideBar-delete" src="../assets/delete_star.png" alt="">
          </li>
        </a>
      </ul>
    </div>
  </div>
</template>
<script>
import * as api from '@/service/api'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      authType: ''
    }
  },
  computed: {
    ...mapState({
      collectList: state => state.me.collectList
    }),
    activeMenu () {
      return this.$route.path
    },
    userId () {
      return this.$store.state.me.user.userId
    },
    curRoute () {
      return this.$route.name
    }
  },
  created () {
    this.getAuthType()
  },
  methods: {
    async removeSiteStar (item) {
      try {
        await api.removeSiteStar({
          siteId: item.siteId
        })
        this.$store.dispatch('getUserInfo')
      } catch (e) {
        console.log(e)
      }
    },
    async modifyUserFoot (item) {
      try {
        await api.modifyUserFoot({
          userId: this.userId,
          siteUrl: item.ipAdd + ':' + item.ipPort,
          siteName: item.siteName,
          siteLogo: item.siteLogo
        })
        window.open(item.ipAdd + ':' + item.ipPort)
      } catch (e) {
        console.log(e)
      }
    },
    linkToSite (item) {
      window.open(item.ipAdd + ':' + item.ipPort)
    },
    handleOpen (key, keyPath) {
      // console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      // console.log(key, keyPath)
    },
    async getAuthType () {
      let res = await api.getAuthcert()
      this.authType = res.data.certification.authType || ''
    }

  }
}
</script>

<style lang="scss">
.el-menu {
  border-right: none;
}
.aside {
  position: fixed;
  top: 0;
  left: 0;
  width: $sidebar-width;
  padding-bottom: 100px;
  background-color: #4d5e70;
  height: 100%;
  z-index: 100;
  overflow-y: auto;
  transition: width 0.5s;
  // -moz-transition: width 1s; /* Firefox 4 */
  // -webkit-transition: width 1s; /* Safari 和 Chrome */
  // -o-transition: width 1s; /* Opera */
  .logo {
    height: $navbar-height;
    text-align: center;
    background-color: $primary;
    img {
      width: 100px;
      height: 32px;
      margin-top: $navbar-height/2;
      transform: translate(0, -50%);
    }
  }
  .el-submenu {
    background-color: #4d5e70;
  }
  .el-submenu {
    background-color: #4d5e70;
  }
  .el-submenu .el-submenu__title {
    color: #8a9597;
  }
  .el-submenu .el-submenu__title:hover {
    background-color: #4d5e70;
  }
  .el-menu-item {
    background-color: #4d5e70;
    color: #8a9597;
    &.is-active {
      color: #fff;
    }
  }
  .el-menu-item:focus,
  .el-menu-item:hover,
  .el-submenu__title:hover {
    background-color: #4d5e70;
    color: #fff;
    span,
    i {
      color: #fff;
    }
  }

  &::-webkit-scrollbar {
    width: 0;
  }
}
.aside.hideBar {
  width: 60px !important;
  .el-menu-item.is-active {
    border: 0;
  }
}
.aside.showBar {
  width: $sidebar-width !important;
  .el-menu-item.is-active {
    width: $sidebar-width;
    border-right: 4px solid $primary;
    transition: border 0.5s;
  }
}
.sideBar {
  &-delete {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 2px;
    top: 14px;
    display: none !important;
  }
  .sideBar-a:hover .sideBar-delete {
    display: inline-block !important;
    filter: contrast(100%) !important;
  }
}
</style>
